<!-- Created by henian.xu on 2018/5/11. -->

<template>
    <div class="img-list">
        <div
            :class="['item',`column-${column}`]"
            v-for="(item,index) in data"
            :key="index"
            @click="onItem(item)"
        >
            <div
                class="inner"
                :style="`background-image: url('${item||$defaultImg}');`"/>
        </div>
    </div>
</template>
<script>
export default {
    name: 'ImgList',
    data() {
        return {};
    },
    props: {
        data: {
            type: Array,
            default() {
                return [];
            },
            required: true,
        },
        column: {
            type: Number,
            default: 4,
        },
    },
    methods: {
        onItem(/*item*/) {
            // this.$wx.previewImage(item, this.data);
        },
    },
};
</script>

<style lang="scss">
@import '~/assets/style/_index.scss';
.img-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    > .item {
        flex: 0 0 auto;
        width: 100%;
        padding: $padding-small;
        line-height: 0;
        @for $i from 1 through 20 {
            &.column-#{$i} {
                width: 100% / $i;
            }
        }
        > .inner {
            line-height: $line-height;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            width: 100%;
            height: 0;
            padding-top: 100%;
            border: 1px solid $color-border;
        }

        &:hover {
            > .inner {
                border-color: $color-main;
            }
        }
    }
}
</style>
